<template>
  <n-config-provider :theme="darkTheme">
    <n-menu
      v-model:value="activeKey"
      mode="horizontal"
      :options="menuOptions"
    />
    <div class="content">
      <n-space>
        <router-view></router-view>
      </n-space>
    </div>
  </n-config-provider>
</template>

<script lang="ts" setup>
import { darkTheme, createDiscreteApi } from "naive-ui";
import type { MenuOption } from "naive-ui";
import { ref, watchEffect } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const activeKey = ref("yuansheng");
const menuOptions: MenuOption[] = [
  {
    label: "原生",
    key: "yuansheng",
  },
  {
    label: "VoiceControl-sdk",
    key: "sdk",
  },
];

watchEffect(() => {
  if (activeKey.value) {
    router.push(activeKey.value);
  }
});
</script>
